<template>
  <div class="main" ref="batchlist">
    <ul class="menu">
      <li>接受定制提醒
        <van-switch class="right" @change="saveTX" size="12px" v-model="dztx"/> 
        <div class="action">
          <span @click="selAll" class="btnsel">{{isSelAll?'取消':'全选'}}</span>
          <span @click="delAll">删除</span>
        </div>
      </li>
    </ul>
    <!-- <div style="margin-top:20px;" v-show="this.list.length==0">
            <div class="title">
                <h1 class="left"></h1>
                <h1 class="right"></h1>
                资源精选
            </div>
            <ul class="demand">
                 
                <li>● 市场低价一手流通资源 自动生成</li>
                <li>● 资源快速上传每日更新 实时提醒</li>
                <li>● 所有资源供需信息 畅通公开</li>
                <li>● 需求发布采用智能匹配 择优而录</li>
                <li>● 全球棉花现货云数据 供您精选</li>
            </ul>
            
    </div>-->
    <div class="dlist" v-show="this.list.length>0">
      <demand
        v-for="(item) in list"
        @delItem="delItem"
        v-on:itemchecked="itemchecked"
        :batch="item"
        :key="item.ID"
      ></demand>
    </div>
    <div style="height:200px;"></div>
    <!-- <van-button
      type="primary"
      size="small"
      class="btn"
      :class="{'btnFix btnBottom':list.length>0}"
      @click="goDingZhi"
      :block="true"
    >
      <i class="iconfont icon-jiahao"></i>定制筛选
    </van-button> -->
    <kefu></kefu>
    <query></query>
  </div>
</template>

<script>
import api from "@/api/api";
import kefu from "@/components/kefu";
import demand from "@/components/demand";
import query from "@/components/query";
import { Toast, Dialog } from "vant";
export default {
  components: {
    demand: demand,
    kefu: kefu,
    query: query
  },
  data() {
    return {
      dztx: true,
      cgtx: true,
      list: [],
      checkList: [],
      isSelAll: false
    };
  },
  methods: {
    selAll() {
      this.isSelAll = !this.isSelAll;
      this.list.forEach(n => {
        n.checked = this.isSelAll;
      });
    },
    delAll() {
      var ids = "";
      this.list.forEach(n => {
        if (n.checked) {
          ids += n.ID + ",";
        }
      });
      if (!ids) {
        return;
      }
      Dialog.confirm({
        title: "确认",
        message: "确定删除？"
      })
        .then(() => {
          // on confirm
          api
            .deleteDemand({
              ids: ids,
              userID: this.$store.state.userInfo.ID
            })
            .then(res => {
              this.getList();
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    itemchecked(BH) {
      var item = this.list.find(n => n.BH == BH);
      item.checked = !item.checked;
      console.log(item);
    },
    goDingZhi() {
      this.$router.push("/user/demandAdd");
    },
    delItem(item) {
      setTimeout(() => {
        this.list.splice(this.list.findIndex(n => n.ID == item.ID), 1);
        //this.getList();
      }, 1000);
    },
    getList() {
      // Toast.loading({
      //   mask: true,
      //   message: "加载中..."
      // });
      api
        .getDemand({
          UserID: this.$store.state.userInfo.ID,
          keyWords: keyWords
        })
        .then(res => {
          res.forEach(n => {
            n.checked = false;
          });
          this.list = res;         
          //Toast.clear();
          if(!this.list.length)
          {
            Toast({message:'暂无筛选记录！',duration:1000});
          }
        });
    },
    saveTX() {
      api
        .updateTZ({
          DZTX: this.dztx ? 1 : 0,
          XQTX: this.cgtx ? 1 : 0,
          OpenID: this.$store.state.userInfo.OpenID
        })
        .then(res => {
          if (res) {
            this.$store.commit("setUserInfo", res);
          }
        });
    }
  },
  created() {
    this.$store.commit("setDZNotice", 0);
    if (this.$store.state.userInfo.isBlack) {
      return;
    }
    window.scroll(0, 0);
    var that = this;
    var timer = setInterval(function() {
      if (that.$store.state.userInfo.ID) {
        that.dztx = that.$store.state.userInfo.DZTX == 1;
        that.cgtx = that.$store.state.userInfo.XQTX == 1;
        //alert(that.$store.state.userInfo.XQTX)
        that.getList();
        clearInterval(timer);
      }
    }, 300);
  }
};
</script>

<style scoped lang='less'>
.main {
  text-align: left;
  padding-top: 30px;
  .menu {
    top: 0;
    position: fixed;
    z-index: 99;
    width: 100%;
    background: #f2f2f2;
    .action {
      position: absolute;
      top: 0;
      right: 10px;

      span {
        height: 1.5em;
        padding: 5px 10px;
        background: #f89393;
        color: #fff;
      }
      .btnsel {
        background: #2c3e50;
      }
    }
    li {
      position: relative;
      height: 3em;
      line-height: 3em;
      padding: 0 1em;
      margin-bottom: 2px;
      display: block;
      font-size: 12px;
      border-bottom: 1px solid #ccc;
    }
    .right {
      top: 0.2em;
      position: relative;
      margin-right: 5px;
    }
  }
  .btnFix {
    position: fixed;
    bottom: 25px;
    left: 10%;
  }
  .dlist {
    margin-bottom: 10px;
  }

  .btn {
    width: 50%;
    margin: 3em auto;

    bottom: 200px;
    background: #f89393;
    border-color: #f89393;
    font-size: 16px;
    height: 2.5em;
  }
  .btnBottom {
    position: fixed;
    left: 25%;
    bottom: 40px;
  }
  .tixing {
    > div {
      position: relative;
      top: 5px;
      margin: 0 5px;
    }
  }

  .demand {
    color: #2c3e50;
    background: #fff;
    padding: 10px;
    h4 {
      text-align: center;
      margin: 6px;
    }
    h5 {
      font-size: 12px;
      text-align: center;
      margin: 6px auto;
    }
    i {
      font-size: 28px;
      display: block;
      text-align: center;
      width: 1.6em;
      height: 1.6em;
      line-height: 1.6em;
      border-radius: 50%;
      background: #fff;
      color: #bce380;
      margin: 0 auto;
    }
    li {
      margin-left: 0px;
      font-size: 16px;
      font-weight: bold;
      line-height: 2em;
      word-spacing: 10px;
      letter-spacing: 1px;
      color: #333;
      background: rgb(231, 231, 231);
      margin-bottom: 5px;
    }
  }
  .title {
    margin-top: 0px;
    position: relative;
    font-size: 16px;
    background: #fff;
    height: 3.4em;
    line-height: 3.4em;
    text-align: center;
    font-weight: bold;
    h1 {
      font-size: 16px;
      position: absolute;
      top: 1.6em;
      width: 20%;
      background: #333;
      height: 1px;
    }
    .left {
      left: 15%;
    }
    .right {
      right: 15%;
    }
  }
  .dingzhi {
    margin-bottom: 2em;
    li {
      display: inline-block;
      padding-left: 5em;
      height: 5em;
      position: relative;
      color: #666;
      h3 {
        margin-top: 20px;
        line-height: 2em;
        color: #333;
      }
      h5 {
        font-weight: normal;
        color: #666;
      }
      i {
        position: absolute;
        left: 0.5em;
        top: 30px;
        font-size: 30px;
      }
    }
  }
}
</style>